import React, { Component } from 'react';
import { observer } from 'mobx-react';
import SettingLayout from '@/component/setting/Layout';
import SettingStyle from '@/page/setting/setting.scss';
import MessageList from '@/component/setting/MessageList';
import ButtonGroup from '@/component/setting/ButtonGroup';
import { Pagination, Spin } from 'antd';
import { message_list } from '@/constants/ApiTypes';
import ApiHelper from '@/store/ApiHelper';

@observer class SettingMessageContract extends Component {
    listApiType = message_list;
    state = {
        spinning: true,
        dataList: [],
        current_page: 1,
        per_page: 10,
        total: 0,
        msg_count: {
            all: 0,
            read: 0,
            unRead: 0
        },
        query: {
            message_type: 2 //合同
        }
    };
    async componentDidMount() {
        this._isMounted = true;
        await this.getDataList();
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    pageOnChange = async pageNumber => {
        const query = this.state.query;
        await this.getDataList(pageNumber, query);
    };
    refresh = () => {
        const { current_page } = this.state;
        return this.pageOnChange(current_page);
    };
    getDataList = async (current_page = 1, query = {}) => {
        //获取列表
        this.setState({ loading: true });
        if (this.listApiType == '') return;
        this.setState({ current_page });
        const data = { per_page: 8, current_page, ...this.state.query, ...query };
        const result = await ApiHelper.requestPost(this.listApiType, data);
        if (!result.status) return;
        const info = result.info;
        this._setState({
            dataList: info.data,
            msg_count: info.msg_count,
            per_page: info.per_page,
            current_page: info.current_page,
            total: info.total,
            loading: false
        });
    };
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    changeReadType = read_type => {
        this.getDataList(1, { read_type });
    };
    render() {
        return (
            <SettingLayout>
                <div className={SettingStyle['message-wrap']}>
                    <ButtonGroup onChange={this.changeReadType} msg_count={this.state.msg_count}/>
                    <Spin spinning={this.state.loading}>
                        <div className={SettingStyle['Message-manage-message-table']}>
                            <MessageList dataSource={ this.state.dataList } refreshList={this.refresh}/>
                        </div>
                    </Spin>
                    <div className="pagination">
                        {this.state.total > 0 && <Pagination showQuickJumper current={this.state.current_page} pageSize={10} total={this.state.total} onChange={this.pageOnChange} />}
                    </div>
                </div>
            </SettingLayout>
        );
    }
}

export default SettingMessageContract;